<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        p{
            color: seagreen;
            font-size: 40px;
        }
    
        
    </style>
    <!-- 
    第二種方式(內部樣式表)
        -講樣式編寫到head中的style標籤裡
            然後通過CSS的選擇器來選中自己選擇的元素並未其設置各種樣式
            可以同時給多個標籤設置樣式,而且修改不麻煩,只要在style標籤裡修改就好了
        -內部樣式表更加方便,進行樣式複用


    -->

    <!-- 
        第三種方式(外部樣式表!)
            -新創文件,專門講CSS樣式編寫到一個外部的CSS文件中!
                然後通過link標籤來引入外部的CSS文件!
            -外部樣式表需要通過link標籤進行引入,
                意味著只要想使用這些樣式的網頁都可以對其進行應用
                可以使一樣的樣式在不同的頁面之間進行複用
            -講樣式編寫到外部的CSS文件中,可以使用到瀏覽器的緩存機制,
            從而加快網頁的加載速度,提高用戶的體驗.
     -->

     <link rel="stylesheet" href="./style.css">

    <!-- 
        stylesheet的意思是樣式表
        rel屬性
            -指定樣式類型
        href屬性
            -指定路徑

     -->
</head>


<body>
    
<!-- 
    網頁分為三個部分:
        結構(HTML)
        表現(CSS)-
        行為(Javascript)
    CSS
        -層疊樣式表
        -網頁實際上是一個多層的結構,通過CSS可以分別網頁的每一個層來設置樣式
            而最終我們能看到的只是網頁的最上邊一層
        -總之一句話,CSS用來設置網頁中元素的樣式
 
 
    -->


    <!-- 
        使用CSS來修改元素的樣式

        第一種方式:(內聯樣式,行內樣式)
            -在變遷內部通過style屬性來設置元素的樣式
            -問題
                使用內聯樣式,樣式只能對一個標籤生效
                    如果希望影響到多個元素必須再每一個元素中都複製一遍
                    並且當樣式發生變化時,我們必須要一個一個的修改,非常的不方便
                
                注意:開發時絕對不要用內聯樣式(否則一旦變化,就會改到瘋狂)
     -->

    <p style="color: red; font-size: 30px;">就這,也就這了</p>
































</body>
</html>